<template>
  <div class="history" v-if="visible" @click.self="emit('close')">
    <div class="dialog">
      <h3>历史选择记录</h3>
      <div class="item-list">
        <p v-if="!list.length">暂无历史记录</p>
        <p v-else>
          <h2 style="margin: 18px 0 18px 0;" v-for="item in list" :key="item">
            <span v-if="textColor === 1" style="color: #e74c3c;">{{ item }}</span>
            <span v-else>
              <span style="color: #e74c3c;">{{ item.split('-')[0] }}</span>
              <span style="color: #77a9ee;">{{ item.split('-')[1] }}</span>
            </span>
          </h2>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const emit = defineEmits(["close"]);
const { visible } = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array,
    default: () => []
  },
  textColor: {
    type: Number,
    default: 1
  },
});
</script>

<style scoped>
/* 历史记录样式 */
.history {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.history .dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 68%;
  max-width: 568px;
  height: 60%;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
}

.history .dialog h3 {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-top: 18px;
  padding-bottom: 18px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border-radius: 8px;
}

.history .dialog .item-list {
  width: 100%;
  height: 100%;
  padding-top: 52px;
  /* 内容超出可滑动 */
  overflow: scroll;
}
</style>